<template>
	<a-table ref="listRef" :option="option" @editHandle="editHandle" @subForm="subForm" >
		<template #default="type">
			<el-table-column label="图片" width="100">
				<template #default="scope">
					<el-image style="width: 50px; height: 50px" :src="config.serverImg + scope.row.img"  fit="scale-down" />
				</template>
			</el-table-column>
			<el-table-column label="名称" min-width="200">
				<template #default="scope">
					<div>{{scope.row.cn_name}}</div>
					<div>{{scope.row.en_name}}</div>
				</template>
			</el-table-column>
			<el-table-column label="标题链接" min-width="200"> 
				<template #default="scope">
					<div>{{scope.row.title}}</div>
					<div>{{scope.row.url}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="other" label="类型" min-width="100">
				<template #default="scope">
					<div v-for="(v,i) in type.typelist" :key="i">
						<span v-if="scope.row.type_id == v.type_id">
							<template v-if="v.type_id == 1">{{scope.row.pid == 0?'一级':'二级'}}</template>
							{{v.name}}
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="sort" sortable="custom" label="排序" width="100"> </el-table-column>
		</template>

		<!-- 其他操作按钮 -->
		<template #but="data">
			<div>
				<a :href="config.domain+data.data.url" target="_blank">
					<el-button type="text" size="small">
						查看
					</el-button>
				</a>
			</div>
		</template>
		
		<!-- 表单 -->
		<template #form="data">
			<el-row :gutter="20">
	
				<el-col :span="12">
					<el-form-item label="中文名称：">
						<el-input v-model.trim="data.form.cn_name" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="英文名称：">
						<el-input v-model.trim="data.form.en_name" placeholder="请输入(选填)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="标题：">
						<el-input v-model.trim="data.form.title" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="链接：">
						<el-input v-model.trim="data.form.url" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="seo关键词：">
						<el-input v-model.trim="data.form.keywords" placeholder="请输入(选填)"></el-input>
					</el-form-item>
					<el-form-item label="seo描述：">
						<el-input v-model.trim="data.form.description" placeholder="请输入(选填)"></el-input>
					</el-form-item>
					<el-form-item label="摘要：">
						<el-input v-model.trim="data.form.abstract" :rows="3" type="textarea" placeholder="请输入(选填)"></el-input>
					</el-form-item>
					<el-form-item label="备注：">
						<el-input v-model.trim="data.form.other"  :rows="3" type="textarea"  placeholder="请输入(选填)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="排序：">
						<el-input v-model.trim="data.form.sort" placeholder="请输入" type="number"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="跳转方式：">
						<el-select v-model="data.form.jump" placeholder="请选择">
							<el-option label="当前窗口打开" value="default"></el-option>
							<el-option label="新窗口打开" value="_blank"></el-option>
							<el-option label="uniapp跳转" value="navigateTo"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="所属页面：">
						<el-select v-model="data.form.pid" placeholder="请选择">
							<el-option label="一级菜单" :value="0"></el-option>
							<el-option 
								:label="v.cn_name"
								:disabled="v.id == data.form.id"
								:value="v.id" v-for="(v,i) in pidData" 
								:key="i">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
	
			</el-row>
		</template>
		
	</a-table>
	
	<aImgLocal
		:spaceValue="pickImg.spaceValue"
		v-model:show="pickImg.showLocal"
		:name="pickImg.name" 
		@img="imgSuccess">
	</aImgLocal>
</template>

<script setup>
	import aTable from "@/components/table/index.vue"
	import publicJS from "@/hook/public.js";
	const {config,api} = publicJS();
	const option = {
		name: '页面',
		spaceValue:'local',//空间名称
		showCover:true,
		showType:true,
		showAddBut: true,
		showEditBut: true,
		showExport: true,
		showDisable: true,
		showEdit:true,
		activeWidth:150,
		getUrl: 'a/Page/get_list',
		delUrl: 'a/Page/del_data',
		getEditUrl:'a/Page/get_detail',
	}

	const listRef = ref(null);

	// 图片选择组件
	import useSelectImg from "@/hook/useSelectImg.js";
	const {aImgLocal,pickImg,selectImg,imgSuccess} = useSelectImg('local',res=>{
		if(res.name == 'editor'){
			editorRef.value.editorObj.execCommand(
				'inserthtml', 
				`<p><img style='max-width:100%' src='${pickImg.serverImg}${res.value}'/></p>`
			);
		}else{
			listRef.value.editForm.form.img = res.value
		}
	});

	//获取 所有父级菜单
	const pidData = ref([]);
	api.post('a/Page/get_list', {
		type:'',
		pid:0,
		keyWord:'',
		page:1,
		prop:'',
		sort:'',
		limit:999
	}).then(r => {
		pidData.value = r.data.list
	})
	
	const editHandle = (data)=>{
		if(data){
			listRef.value.editForm.form.image = data.img;
			listRef.value.editForm.form.type = data.type_id;
		}else{
			listRef.value.editForm.form.img = '';
			listRef.value.editForm.form.other = '';
			listRef.value.editForm.form.jump = 'default';
			listRef.value.editForm.form.pid = 0;
			listRef.value.editForm.form.type = 1;
		}
	}
	
	const subForm = (data)=>{
		let url = "a/Page/add_data";
		if (data?.id) url = "a/Page/updata"

		data.img = data.image;
		data.type_id = data.type;
		api.post(url, data).then(r => {
			listRef.value.searchFun()
		})
	}
</script>

<style scoped lang="scss">
	.c1{cursor: pointer;}
	.img {
		width: 60px;
	}
</style>
